import { title } from "process";
import { Component, ReactNode } from "react";

/*
    子传父
    1. 在父组件中定义一个接收的方法
    2. 将接收方法传递到子组件
    3. 子组件接收父组件传递过来的方法
    4. 触发调用父组件的接收方法，且可以传递参数
    5. 使用子组件传递过来的数据
*/



class Header extends Component { 

    // 3. 子组件接收父组件传递过来的方法
    props = {
        dataFn:(title:string)=>{ }
    }
    render(): ReactNode {
        return <>
        <h1>头部</h1>
        <button onClick={()=>{
            // 4. 触发调用父组件的接收方法，且可以传递参数
           this.props.dataFn('--传递给父组件的数据')
        }}>点击</button>
        </>
    }
}



export default class App extends Component {

    state= {
        title: '---父组件'
    }

    // 1. 在父组件中定义一个接收的方法(一定要是个回调函数)
    dataGet = (title:string) =>{
         // 5. 使用子组件传递过来的数据
        console.log('父组件接收：' + title);
        this.setState({
            title
        })
    }
    render(): ReactNode {
        return<>
        <div>
            <h1>父组件 {this.state.title}</h1>
            <hr />
             {/* 2. 将接收方法传递到子组件 */}
            <Header dataFn = {this.dataGet}></Header>
        </div>
        </>
    }

}


